<template>
  <view class="distribution-center">
    
    <!-- 用户资料和统计信息区域 -->
    <view class="profile-section">
      <view class="profile-bg"></view>
      <view class="profile-content">
        <view class="user-info">
          <view class="avatar">
            <view class="avatar-placeholder">👤</view>
          </view>
          <view class="user-details">
            <text class="user-id">123</text>
            <text class="user-status">正常运行</text>
          </view>
        </view>
        
        <!-- 统计卡片 -->
        <view class="stats-card">
          <view class="stat-item">
            <text class="stat-value">10.00</text>
            <text class="stat-label">累计收益</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">9</text>
            <text class="stat-label">余额</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">2</text>
            <text class="stat-label">订单</text>
          </view>
          <view class="stat-item">
            <text class="stat-value">0</text>
            <text class="stat-label">客户</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 提醒通知栏 -->
    <view class="alert-bar">
      <text class="alert-text">有<text class="highlight">0</text>元处于售后期不可提现,有<text class="highlight">0</text>元订单未完成</text>
    </view>
    
    <!-- 分销工具区域 -->
    <view class="tools-section">
      <view class="section-title">分销工具</view>
      <view class="tools-grid">
        <view class="tool-item" @click="viewOrders">
          <view class="tool-icon">📋</view>
          <text class="tool-text">查看订单</text>
        </view>
        <view class="tool-item" @click="viewCustomers">
          <view class="tool-icon">👤</view>
          <text class="tool-text">查看客户</text>
        </view>
        <view class="tool-item" @click="inviteFriends">
          <view class="tool-icon">👥</view>
          <text class="tool-text">邀请好友</text>
        </view>
        <view class="tool-item" @click="promoteProducts">
          <view class="tool-icon">🔗</view>
          <text class="tool-text">推广商品</text>
        </view>
        <view class="tool-item" @click="viewTransactions">
          <view class="tool-icon">📊</view>
          <text class="tool-text">查看流水</text>
        </view>
        <view class="tool-item" @click="withdraw">
          <view class="tool-icon">💰</view>
          <text class="tool-text">我要提现</text>
        </view>
        <view class="tool-item" @click="withdrawRecords">
          <view class="tool-icon">📄</view>
          <text class="tool-text">提现记录</text>
        </view>
        <view class="tool-item" @click="notifications">
          <view class="tool-icon">💬</view>
          <text class="tool-text">通知中心</text>
        </view>
      </view>
    </view>
    
    <!-- 分销说明区域 -->
    <view class="explanation-section">
      <view class="section-title">分销说明</view>
      <view class="explanation-content">
        <text class="explanation-text">下级或者下级的下级用户提交订单您立刻能查看订单,等待订单支付完成并标记为已完成状态,佣金会变成您的余额,但在售后期(7天)内的余额不可提现,只有等售后期过了之后才可提现。</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DistributionCenter',
  data() {
    return {
      userInfo: {
        id: '123',
        status: '正常运行',
        avatar: '/static/images/default-avatar.png'
      },
      stats: {
        totalEarnings: 10.00,
        balance: 9,
        orders: 2,
        customers: 0
      },
      alertInfo: {
        pendingWithdraw: 0,
        incompleteOrders: 0
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    viewOrders() {
      uni.navigateTo({
        url: '/pages/users/distribution_orders/index'
      })
    },
    viewCustomers() {
      uni.navigateTo({
        url: '/pages/users/distribution_customers/index'
      })
    },
    inviteFriends() {
      uni.navigateTo({
        url: '/pages/users/invite_friends/index'
      })
    },
    promoteProducts() {
      uni.navigateTo({
        url: '/pages/users/promote_products/index'
      })
    },
    viewTransactions() {
      uni.navigateTo({
        url: '/pages/users/transaction_records/index'
      })
    },
    withdraw() {
      uni.navigateTo({
        url: '/pages/users/withdraw/index'
      })
    },
    withdrawRecords() {
      uni.navigateTo({
        url: '/pages/users/withdraw_records/index'
      })
    },
    notifications() {
      uni.navigateTo({
        url: '/pages/users/notifications/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.distribution-center {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.nav-icon {
  font-size: 32rpx;
  color: #333;
}

.profile-section {
  position: relative;
  margin-top: 0;
  padding: 40rpx 30rpx 0;
}

.profile-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200rpx;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  border-radius: 0 0 20rpx 20rpx;
}

.profile-content {
  position: relative;
  z-index: 2;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20rpx;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: #666;
  background: #f0f0f0;
  border-radius: 50%;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-id {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8rpx;
}

.user-status {
  font-size: 24rpx;
  color: #fff;
  opacity: 0.9;
}

.stats-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.alert-bar {
  background: #fff3cd;
  margin: 20rpx 30rpx;
  padding: 20rpx;
  border-radius: 12rpx;
  border-left: 6rpx solid #ffc107;
}

.alert-text {
  font-size: 26rpx;
  color: #856404;
}

.highlight {
  color: #dc3545;
  font-weight: bold;
}

.tools-section {
  background: #fff;
  margin: 20rpx 30rpx;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rpx;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 10rpx;
  border-radius: 12rpx;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

.tool-item:active {
  background: #e9ecef;
  transform: scale(0.95);
}

.tool-icon {
  font-size: 48rpx;
  margin-bottom: 15rpx;
}

.tool-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  line-height: 1.4;
}

.explanation-section {
  background: #fff;
  margin: 20rpx 30rpx 40rpx;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.explanation-content {
  margin-top: 20rpx;
}

.explanation-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}
</style>